<template>
	<view>
		<view class="list flex-col align-center">
			<u-swipe-action class="my-card" :show="i.show" :index="index" v-for="(i, index) in bank" :key="i.id" @click="click" @open="open"
			 :options="options">
				<image class="bg" :src="i.icon"></image>
				<view class="main">
					<view class="name">{{i.bank_name}}</view>
					<view class="number">{{i.hide_card_no}}</view>
				</view>
			</u-swipe-action>

			<view class="add-btn flex-row align-center" @click="$goto('/pages/bankcard/add')">
				<image src="../../static/images/bk0.png" style="width: 40rpx;height: 40rpx;margin: 0 24rpx 0 36rpx;"></image>
				<text>添加银行卡</text>
			</view>

			<u-modal v-model="modal" content="确定要删除该银行卡吗？"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bank: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}],
				modal: false
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.$u.get('/finance/account/bank').then(res => {
					if (res.data.code!=0) {
						uni.hideLoading();
						this.bank = []
						return;
					}
					let bank = res.data.result.bank
					bank.forEach(item => {
						item.show = false
					})
					this.bank = bank
					uni.hideLoading();
				})
			},
			onClick(id, e) {
				this.delBank(id)
			},
			delBank(id) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$u.post('/finance/account/bank/delete', {
					card_id: id
				}).then(res => {
					this.$msg(res.data.msg)
					this.getList()
				})
			},
			click(index, opt) {
				let target = this.bank[index]
				this.delBank(target.id)
				target.show = false;
			},
			open(index) {
				let target = this.bank[index]
				target.show = true;
				this.bank.map((val, idx) => {
					if (index != idx) target.show = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-card {
		width: 670rpx;
		height: 206rpx;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
		margin-top: 32rpx;

		.bg {
			position: absolute;
			width: 670rpx;
			height: 206rpx;
			z-index: 1;
		}

		.main {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			z-index: 2;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			letter-spacing: 2rpx;
			color: #fff;

			.name {
				height: 106rpx;
				line-height: 106rpx;
				padding-left: 120rpx;
				font-size: 32rpx;
			}

			.number {
				height: 100rpx;
				padding-left: 80rpx;
				font-size: 50rpx;
			}
		}
	}

	.add-btn {
		width: 670rpx;
		height: 126rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		margin: 32rpx 0;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
</style>
